<script setup lang="ts">

import {reactive} from "vue";
import HexGrid, {HexData} from "@/components/hex/HexGrid.vue";
import {HexMatrix, HexMatrixType} from "@/components/hex/HexMatrix";
import {range} from "@/components/comm/utils";

const rows = 16;
const cols = 19;
// 假设小球半径为r，总宽度为2*r+(cols-1)*2*r*sqrt(3)/2=800
// 2*r+(cols-1)*r*sqrt(3)=800
// r*(2+(cols-1)*sqrt(3))=800
const r = 800 / (2 + (cols - 1) * Math.sqrt(3));
const radius = r / (Math.sqrt(3) / 2);
const center: [number, number] = [r, r];
const hexMatrix = reactive(new HexMatrix<HexData>(rows, cols, HexMatrixType.ODD_Q, ([x, _, z]) => ({
  circleFill: 'pink',
  showCircle: false,
  text: `${[z + (x - (x & 1)) / 2, x]}`,
})));
const main = hexMatrix.get([9, -20, 11]);
main.showCircle = true;
main.circleFill = 'red';
for (let i of range(5)) {
  for (let j of range(cols)) {
    const obj = hexMatrix.data.get([i, j]);
    obj.showCircle = true;
    obj.circleFill = 'pink';
  }
}

</script>

<template>
  <div class="main">
    <HexGrid
        :data="hexMatrix"
        :radius="radius"
        :center="center"
        :showHex="true"
        hexFill="none"
        :showCircle="true"
        :inclination="0"
    >
    </HexGrid>
  </div>
</template>

<style scoped>

</style>